import { Layout, Row, Col, Flex, Button, Form, Input, Pagination } from "antd";
import { BoldOutlined } from "@ant-design/icons";
import React, { useEffect, useRef } from "react";
import "./UserContext.css";
import UserList from "./UserList";

const UserContext: React.FC = () => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        backgroundColor: "white",
      }}
    >
      <p
        style={{
          lineHeight: "normal",
          textAlign: "left",
          color: "black",
          marginLeft: "16px",
        }}
      >
        系统管理/角色列表
      </p>
      <h1
        style={{
          lineHeight: "normal",
          textAlign: "left",
          color: "black",
          marginTop: "0px",
          marginLeft: "16px",
        }}
      >
        角色列表
      </h1>
      <div style={{ backgroundColor: "#F0F2F5", flex: 1 }}>
        <Form
          layout={"inline"}
          style={{
            width: "100%",
            display: "flex",
            flex: 1,
            padding: "10px",
            backgroundColor: "white",
            columnGap: "10px",
            margin: "20px",
          }}
        >
          <Form.Item label="角色名称">
            <Input placeholder="input placeholder" />
          </Form.Item>
          <Form.Item label="状态">
            <Input placeholder="input placeholder" />
          </Form.Item>
          <Form.Item>
            <Button type="primary">Submit</Button>
          </Form.Item>

          <Button type="default" style={{ marginLeft: "auto" }}>
            重置
          </Button>
          <Button type="primary" style={{ marginRight: "30px" }}>
            查询
          </Button>
        </Form>

        <UserList></UserList>
      </div>
    </div>
  );
};
export default UserContext;
